<script lang="ts" setup>
import { defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
import { RankingAll } from '@/apis/index'
import { timeAbbreviation } from '@/utils/time'
import { useCounterStore } from '@/stores/counter'

import type { RankingAllList } from '@/TypingMore/HomeIsPn' 

import ItIsTheEnd from '@/components/ItIsTheEnd.vue'

const props = defineProps<{
    rid: string
}>()

const store = useCounterStore()

const { browseRecords } = store

const router = useRouter()

const rankingData = ref<RankingAllList[]>([])

const getRankingAllData = async () => {
    console.log(props.rid)
    let { data } = await RankingAll.getRankingAll(props.rid)
    rankingData.value = data.data.list
    console.log(data.data.list, props.rid)
}

const goToDetail = (bvid: string, r: RankingAllList) => {
    let obj = {
        bvid: r.bvid,
        aid: r.aid,
        length: r.duration,
        title: r.title,
        play: r.stat.danmaku,
        video_review: r.stat.view,
        pic: r.pic
    }
    browseRecords(obj)
    router.push(`/video/${bvid}`)
}

getRankingAllData()
</script>

<template>
  <div style=" position: relative; height: 100vh; z-index: 100; background-color: #fff;">
    <div class=" flex fixed justify-between items-center h-11 px-3 text-white top-0 left-0 right-0 bg-white z-40">
        <div @click="router.push('/')"><van-icon name="arrow-left" color="#fb7299" /></div>
        <p style="color: #fb7299;">排行榜</p>
        <p style="color: transparent;">!</p>
    </div>
    <div >
        <div v-for="(r, index) in rankingData" :key="r.aid" class=" flex relative mt-3 mx-2 mb-2"
            @click="goToDetail(r.bvid, r)">
            <div class=" flex items-center w-8 text-yellow-600">
                <img src="@/assets/rank1.png" alt="" class=" w-3/5" v-if="index === 0">
                <img src="@/assets/rank2.png" alt=""   class=" w-3/5" v-else-if="index === 1">
                <img src="@/assets/rank3.png" alt=""  class=" w-3/5" v-else-if="index === 2">
                <p style="color: #666;" class=" text-base w-5 text-center" v-else>{{ index + 1}}</p>
            </div>
            <div class=" w-36">
                <img :src="r.pic + '@480w_270h_1c'" alt="" class=" w-full img-rounde rounded-lg" />
            </div>
            <div class=" flex-1 flex flex-col justify-between ml-3">
                <p v-html="r.title" class=" text-sm line-two"></p>
                <p class=" text-xs text-gray-400"><span class=" mr-1">up</span><span>{{ r.owner.name }}</span>
                </p>
                <div class="flex text-xs text-gray-400">
                    <div class="mr-3 flex items-center"><span class="iconfont icon-bofangshu mr-1"></span><span>{{
                            timeAbbreviation(r.stat.view)
                    }}</span></div>
                    <div class=" flex items-center"><span class="iconfont icon-danmushu mr-1"></span><span>{{
                            timeAbbreviation(r.stat.danmaku)
                    }}</span></div>
                </div>
            </div>
        </div>
        <ItIsTheEnd></ItIsTheEnd>
    </div>
  </div>
</template>